<template>
  <h2>Environment Variables</h2>
  <p class="base">
    <code>import.meta.env.BASE_URL: {{ base }}</code>
  </p>
  <p class="mode">
    <code>import.meta.env.MODE: {{ mode }}</code>
  </p>
  <p class="dev">
    <code>import.meta.env.DEV: {{ dev }}</code>
  </p>
  <p class="prod">
    <code>import.meta.env.PROD: {{ prod }}</code>
  </p>
  <p class="custom-env-variable">
    <code>import.meta.env.VITE_CUSTOM_ENV_VARIABLE: {{ custom }}</code>
  </p>
  <p class="effective-mode-file-name">
    <code>import.meta.env.VITE_EFFECTIVE_MODE_FILE_NAME: {{ modeFile }}</code>
  </p>
  <p class="node-env">
    <code>process.env.NODE_ENV: {{ NODE_ENV }}</code>
  </p>
  <p class="import-meta-env">
    <pre>import.meta.env: {{ env }}</pre>
  </p>
</template>


<script setup="props,ctx" >
// export default {
//   data() {
//     return {
    //   base: import.meta.env.BASE_URL,
    //   mode: import.meta.env.MODE,
    //   dev: import.meta.env.DEV,
    //   prod: import.meta.env.PROD,
    //   custom: import.meta.env.VITE_CUSTOM_ENV_VARIABLE,
    //   modeFile: import.meta.env.VITE_EFFECTIVE_MODE_FILE_NAME,
    //   NODE_ENV: process.env.NODE_ENV,
    //   env: JSON.stringify(import.meta.env, null, 2)
//     }
//   }


// }
import { ref } from "vue"
import envInfo from '../utils/envInfo'
    
    

    export const base = envInfo.BASE_URL
    export const mode = envInfo.MODE
    export const dev = envInfo.DEV
    export const prod = envInfo.PROD
    export const custom = envInfo.VITE_CUSTOM_ENV_VARIABLE
    export const modeFile = envInfo.VITE_EFFECTIVE_MODE_FILE_NAME
    export const NODE_ENV = process.env.NODE_ENV
    export const env = JSON.stringify(envInfo, null, 2)

    export const color = ref('red')
    setInterval(()=>{
        let colors = Math.random().toString(16)
        let start=2, end=4
        color.value = `#${colors.slice(start+=2,end+=2)}${colors.slice(start+=2,end+=2)}${colors.slice(start+=2,end+=2)}`
    },1000)


</script>

<style vars="{ color }">
    .import-meta-env {
        color: var(--color);
    }
</style>